<style scoped>
.contentComment {
  padding: 10px;
  background-color: #f2f6fc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  position: relative;
}
.contentComment li,
.contentComment ul {
  list-style: none;
}
.contentComment .list li {
  margin: 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid red;
  font-size: 12px;
}
.contentComment .list li .time {
  color: rgb(153, 153, 153);
}
.contentComment .list li .name {
  color: rgb(0, 0, 0);
  font-weight: 700;
}
.contentComment .list li .msg {
  color: rgb(44, 78, 122);
  font-family: "宋体";
}
.contentComment .submit {
  border: 1px solid sienna;
  border-radius: 4px;
  overflow: hidden;
}
.contentComment .submit input {
  width: calc(100% - 200px);
  box-sizing: border-box;
  border: none;
  padding-left: 20px;
  outline: none;
  line-height: 26px;
}
.contentComment .submit button.sub {
  cursor: pointer;
  width: 100px;
  box-sizing: border-box;
  border: none;
  outline: none;
  line-height: 26px;
}
.contentComment .submit button.faceBut {
  cursor: pointer;
  width: 100px;
  box-sizing: border-box;
  background-color: rgb(241, 97, 193);
  border: none;
  outline: none;
  line-height: 26px;
}
.contentComment .please,
.contentComment .empty {
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: slateblue;
}
.contentComment .browBox {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 90%;
  background-color: #fff;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}
.contentComment .browBox ul {
  padding:3px;
  display: grid;
  grid-template-columns: repeat(14, 40px);
}
.contentComment .browBox ul li {
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  cursor: pointer;
  /* background-color: red; */
  border-radius: 4px;
  transition:.3s;
}
.contentComment .browBox ul li:hover{
  font-size: 20px;
  background-color: rgb(209, 209, 209);
}
</style>
<template>
  <div class="contentComment">
    <!-- 评论区 -->
    <h3>评论区</h3>
    <template v-if="uid != ''">
      <ul class="list" v-if="list.length != 0">
        <li v-for="item in list" :key="item.time">
          <span class="time">{{
            $dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")
          }}</span>
          : <span class="name">{{ item.name.username }}</span> ：
          <span class="msg">{{ item.msg }}</span>
        </li>
      </ul>
      <div class="empty" v-else>当前无评论，快来热闹起来吧~</div>
      <div class="submit">
        <input placeholder="评论你的看法吧" type="text" v-model="val" />
        <button class="faceBut" @click="faceContent">表情</button>
        <button class="sub" @click="pushData">发布</button>
      </div>
      <div class="browBox" v-if="faceShow">
        <ul>
          <li
            v-for="(item, index) in faceList"
            @click="getBrow(index)"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </template>
    <div class="please" v-else>
      <h3>登录后再来看评论~</h3>
    </div>
  </div>
</template>

<script>
import appData from "../assets/emojis.json";
console.log(appData);
export default {
  props: ["list", "uid"],
  name: "contentComment",
  data: () => ({
    val: "",
    faceShow: false,
    faceList: [],
  }),
  created(){
      this.init();
  },
  methods: {
    init() {
        for (let i in appData) {
          this.faceList.push(appData[i].char);
        }
    },
    getBrow(val) {
      this.val += this.faceList[val];
    },
    faceContent() {
      this.faceShow = !this.faceShow;
    },
    pushData() {
      this.$emit("push", this.val);
      this.faceShow = false;
      this.val = "";
    },
  },
};
</script>